<route>
    {
        meta: {
            enabled: false
        }
    }
    </route>

<script setup>
import { Film, Files, Microphone, DocumentCopy, Delete, Plus, Download, Switch, Folder, FolderAdd, More } from '@element-plus/icons-vue'
import useFileStore from '@/store/modules/file'
import Editor from '@/components/Editor/index.vue'
import router from '@/router/index'

const fileStore = useFileStore()

// const activeName = ref('doc')
const thisFile = ref([])

const fileList = ref([])
const docList = ref([])
const videoList = ref([])
const soundList = ref([])
const otherList = ref([])
const tagsList = ref([])
const inputVisible = ref(false)
const tagVisible = ref(false)
const inputValue = ref("")
const tagValue = ref("")
const selectId = ref(0)
const text = ref()

const search = ref({})

const time = ref('')

const type = ref('')

// const videoUrl = ref('https://prod-streaming-video-msn-com.akamaized.net/ba258271-89c7-47bc-9742-bcae67c23202/f7ff4fe4-1346-47bb-9466-3f4662c1ac3a.mp4')

const dialogVisible = ref(false)
const videoShow = ref(false)
const picUrl = ref('https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png')
// const srcList = ref('')
const thisShowFile = ref({
    type: 0,
    srcList: '',
    uid: ''
})

const myValue = ref('')

// const videorateselect = ref()
// // 视频元素
const examplevideo = ref()
onMounted(() => {
    init()
})

function init() {
    fileList.value = []
    docList.value = []
    soundList.value = []
    videoList.value = []
    otherList.value = []
    selectId.value = 0
    getfileList()
}

function getfileList() {
    fileStore.getPublicFileList().then(res => {
        sortList(res)
        // fileListData.value = res
    })
    getTags()
}
function sortList(list) {
    videoList.value = []
    fileList.value = []
    docList.value = []
    soundList.value = []
    otherList.value = []
    thisFile.value = list
    if(!list.path) {
        thisFile.value.path = '/'
    }
    let arr = []
    if( !!list.children) {
        arr = list.children
    } else {
        arr = list
    }
    if(!arr.length) { return }
    arr.forEach(element => {
        if (element.file) {
            let fileType = element.name.split('.').pop().toLowerCase()

            switch (fileType) {
                case 'mp4':
                case  'mov':
                    // case 'mov':
                    videoList.value.push(element)
                    break
                case  'txt':
                case   'rtf':
                    docList.value.push(element)
                    break
                case 'mp3':
                    soundList.value.push(element)
                    break
                default:

                    otherList.value.push(element)
                    break

            }
        } else {
            fileList.value.push(element)

        }

    })
}
function selectUpFile(pid) {

    fileStore.getFileList(pid).then(res => {

        sortList(res)
    })

}

function selectFile(name) {
    let nextPath = ''
    if (thisFile.value.path == '/') {
        nextPath = thisFile.value.path + name
    } else {
        nextPath = thisFile.value.path + '/' + name

    }
    const params = {
        type: 'share',
        path: nextPath
    }

    fileStore.getFileListByPath(params).then(res => {

        sortList(res)

    })
}

function downloadFile(file) {
    fileStore.download({ fileIds: file.id }).then(res => {
        // const xlsx = 'application/vnd.ms-excel'
        const blob = new Blob([res])
        const a = document.createElement('a') // 转换完成，创建一个a标签用于下载
        // const name = res.headers['content-disposition']
        // a.download = name.split('=')[1]
        a.download = file.name
        a.href = window.URL.createObjectURL(blob)
        a.click()
        a.remove()

    })

}

function deleteFile(file) {

    ElMessageBox.confirm('此操作将永久删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            fileStore.deleteFile(file.id).then(() => {
                selectUpFile(thisFile.value.id)
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                })
                // const xlsx = 'application/vnd.ms-excel'
                // dataList.value.splice(index, 1)
            })

        })
        .catch(() => {
            // catch error
            ElMessage({
                type: 'info',
                message: '已取消'
            })
        })

}

function showDefault(file, type) {
    videoShow.value = false
    thisShowFile.value.type = type
    thisShowFile.value.uid = file.id
    if(file.name.split('.')[1] == 'md') {
        thisShowFile.value.type = 5
        fileStore.getContent(file.id).then(res => {
            text.value = res
        })
    }
    dialogVisible.value = true
    fileStore.getMediaStream(file.id).then(res => {
        const blob = new Blob([res])
        // let downloadurl = window.URL ? window.URL.createObjectURL(res) : window.webkitURL.createObjectURL(res)
        let href = window.URL.createObjectURL(blob)
        res.text().then(value => myValue.value = value)
        thisShowFile.value.srcList = href
        videoShow.value = true
    })

}

function submitWrite(file) {
    ElMessageBox.confirm('确认提交?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            fileStore.writeDoc({ fileId: thisShowFile.value.uid,  content: myValue.value }
            ).then(() => {
                selectUpFile(thisFile.value.id)
                ElMessage({
                    type: 'success',
                    message: '提交成功'
                })
                dialogVisible.value = false

            // const xlsx = 'application/vnd.ms-excel'
            // dataList.value.splice(index, 1)
            })

        })
        .catch(() => {
            // catch error
            ElMessage({
                type: 'info',
                message: '已取消'
            })
        })

}

function getTags() {
    fileStore.tagsGet().then(res => {
        tagsList.value = res
    })
}

function deleteTag(id) {
    fileStore.deleteTags(id).then(res => {
        ElMessage({
            type: 'success',
            message: '删除成功'
        })
        getTags()
    })
}

function handleInputTags() {
    inputVisible.value = false
    fileStore.createTags({name: inputValue.value}).then(res => {
        ElMessage({
            type: 'success',
            message: '新建成功'
        })
        getTags()
    })
}

function showInput() {
    inputVisible.value = true
    inputValue.value = ""
}

function selectTag(k) {
    if(selectId.value == k.id) {
        selectId.value = ''
        init()
    } else {
        selectId.value = k.id
        fileStore.tagsGetByFiles(k.id).then(res => {
            sortList(res)
        })
    }
}

function showTagValue() {
    tagVisible.value = true
    tagValue.value = ""
}

function reduceArr(arr) {
  const res = new Map();
  return arr.filter((item) => !res.has(item['id']) && res.set(item['id'], 1));
}

function changeTagValue(val, o) {
    tagVisible.value = false
    tagsList.value.forEach(item => {
        if(item.id == val) {
            o.tags.push(item)
        }
    })
    o.tags = reduceArr(o.tags)
    let obj = {
        fileId: o.id,
        name: o.name,
        parentId: thisFile.value.id,
        tagIds: []
    }
    o.tags.forEach(item => {
        obj.tagIds.push(item.id)
    })
    fileStore.editFile(obj).then(res => {
        ElMessage({
            type: 'success',
            message: '编辑成功'
        })
    })
}

function handleClose(item, index, o) {
    o.tags.splice(index, 1)
    let obj = {
        fileId: o.id,
        name: o.name,
        parentId: thisFile.value.id,
        tagIds: []
    }
    o.tags.forEach(item => {
        obj.tagIds.push(item.id)
    })
    fileStore.editFile(obj).then(res => {
        ElMessage({
            type: 'success',
            message: '编辑成功'
        })
    })
}

function share(file, thisFile) {
    router.push({
        name: "personalShare",
        query: { o: JSON.stringify(file), thisFile: JSON.stringify(thisFile)}
    })
}

</script>

<template>
    <div>
        <page-header title="共享资源卡片列表">
            <template #content>
                <p style="margin-bottom: 0;">共享资源中展示所有用户共享的视频，文稿和音频，可点击下载，也可点击本地上传开始共享资源</p>
                <el-breadcrumb separator="/">
                    <!-- <el-breadcrumb-item>个人资源导航</el-breadcrumb-item> -->
                    <el-breadcrumb-item>
                        <router-link style="color: #409efc;" :to="{name: 'publicExampleIndex',query: {id: thisFile.id}}">
                            {{ thisFile.path }}
                        </router-link>
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </template>
        </page-header>
        <page-main>
            <el-row>
                <el-col :span="4">
                    <el-card class="box-card">
                        <div class="clearfix" slot="header">
                            <div class="card-title">标签列表</div>
                        </div>
                        <div class="card-d" :class="selectId == item.id ? 'sel' : ''" v-for="(item, index) in tagsList" @click="selectTag(item)">
                            <div>{{ item.name }}</div>
                            <el-button style="border: none;" :icon="Delete" @click.stop="deleteTag(item.id)"></el-button>
                        </div>
                        <el-input v-if="inputVisible" v-model="inputValue" @keyup.enter="handleInputTags"></el-input>
                        <el-button type="primary" size="small" class="button-new-tag ml-1" @click="showInput" v-else>添加新标签</el-button>
                    </el-card>
                </el-col>
                <el-col :span="20">
                    <el-row>
                        <el-col
                            v-if="thisFile.path!=='/'"
                            :span="6"
                            :offset="1"
                        >
                            <el-card :body-style="{ padding: '0px'}" align="middle" @dblclick="selectUpFile(thisFile.parentId)">
                                <div style="line-height: 130px;width: 230px;">
                                    <span style="margin-left: 10px;color: #409efc;">返回上一级</span>
                                </div>
                            </el-card>
                        </el-col>

                        <el-col
                            :span="6"
                            :offset="1"
                        >
                            <el-card :body-style="{ padding: '0px'}" align="middle">
                                <router-link style="color: #409efc;" :to="{name: 'personalExampleUpload',query: {id: thisFile.id}}">
                                    <div style="line-height: 130px;width: 230px;">
                                        <el-icon color="#409EFC"><Plus /></el-icon>
                                        <span style="margin-left: 10px;color: #409efc;">本地上传</span>
                                    </div>
                                </router-link>
                            </el-card>
                        </el-col>
                        <el-col
                            :span="6"
                            :offset="1"
                        >
                            <el-card :body-style="{ padding: '0px'}" align="middle">
                                <router-link style="color: #409efc;" :to="{name: 'personalFileList',query: {id: thisFile.id}}">
                                    <div style="line-height: 130px;width: 230px;">
                                        <el-icon :size="30" color="#409EFC"><FolderAdd /></el-icon>
                                        <span style="margin-left: 10px;margin-top: -5px;color: #409efc;">新建文件夹</span>
                                    </div>
                                </router-link>
                            </el-card>
                        </el-col>
                        <el-col
                            :span="6"
                            :offset="1"
                        >
                            <el-card :body-style="{ padding: '0px'}" align="middle">
                                <router-link style="color: #409efc;" :to="{name: 'personalFileArt',query: {id: thisFile.id}}">
                                    <div style="line-height: 130px;width: 230px;">
                                        <el-icon color="#409EFC"><Plus /></el-icon>
                                        <span style="margin-left: 10px;margin-top: -5px;color: #409efc;">新建文章</span>
                                    </div>
                                </router-link>
                            </el-card>
                        </el-col>
                        <el-col
                            v-for="(o, index) in fileList"
                            :key="o"
                            :span="6"
                            :offset="index > 0 ? 1: 1"
                        >
                            <el-card :body-style="{ padding: '0px'}" align="middle" @dblclick="selectFile(o.name)">
                                <div style="display: flex; width: 200px; height: 50px;margin-top: 30px;margin-left: 30px;">
                                    <el-icon color="#409EFC"><Folder /></el-icon>
                                    <span style="margin-left: 15px;margin-top: -5px;">
                                        {{ o.name }}</span>
                                </div>
                                <div style="padding: 10px;">
                                    <div class="bottom">
                                        <router-link :to="{name: 'personalFileEdit',query: { o: JSON.stringify(o), thisFile: JSON.stringify(thisFile)}}">
                                            <el-button style="border: none;" :icon="Switch">移动</el-button>
                                        </router-link>
                                        <el-divider direction="vertical" />
                                        <el-button style="border: none;" :icon="Delete" @click="deleteFile(o)">删除</el-button>
                                        <el-divider direction="vertical" />
                                        <el-dropdown trigger="click" :hide-on-click="false">
                                            <el-button style="border: none;" :icon="More" />
                                            <template #dropdown>
                                                <el-dropdown-menu class="user-dropdown">
                                                    <el-dropdown-item>
                                                        <span @click="share(o, thisFile)">共享</span>
                                                    </el-dropdown-item>
                                                </el-dropdown-menu>
                                            </template>
                                        </el-dropdown>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col
                            v-for="(o, index) in docList"
                            :key="o"
                            :span="6"
                            :offset="index > 0 ? 1: 1"
                        >
                            <el-card :body-style="{ padding: '0px'}" align="middle" @dblclick="showDefault(o,1)">
                                <div style="display: flex; width: 200px; margin-top: 30px;margin-left: 30px;">
                                    <el-icon color="#409EFC"><DocumentCopy /></el-icon>
                                    <span style="margin-left: 15px;margin-top: -5px;">{{ o.name }}</span>
                                </div>
                                <div>
                                    <el-divider border-style="dotted" />
                                    <div class="bottom">
                                        <el-button style="border: none;" :icon="Download" @click="downloadFile(o)" />
                                        <el-divider direction="vertical" />

                                        <router-link :to="{name: 'personalFileEdit',query: {id: o.id,name:o.name}}">
                                            <el-button style="border: none;" :icon="Switch" />
                                        </router-link>                                <el-divider direction="vertical" />

                                        <!-- <el-button style="border: none;" :icon="Share" /> -->
                                        <el-button style="border: none;" :icon="Delete" @click="deleteFile(o)" />

                                        <el-divider direction="vertical" />
                                        <el-dropdown trigger="click" :hide-on-click="false">
                                            <el-button style="border: none;" :icon="More" />
                                            <template #dropdown>
                                                <el-dropdown-menu class="user-dropdown">
                                                    <el-dropdown-item>
                                                        <span @click="showDefault(o,1)">打开</span>
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <router-link :to="{name: 'personalFileEdit',query: { o: JSON.stringify(o), thisFile: JSON.stringify(thisFile)}}">
                                                            移动
                                                        </router-link>   
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <span @click="deleteFile(o)">删除</span>
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <span @click="share(o, thisFile)">共享</span>
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <span @click="downloadFile(o)">下载</span>
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <el-tag
                                                        class="mx-1"
                                                        closable
                                                        v-for="item in o.tags"
                                                        :disable-transitions="false"
                                                        @close="handleClose(item.id, o.id)">{{ item.name }}</el-tag>
                                                        <el-select
                                                        v-if="tagVisible"
                                                        v-model="tagValue"
                                                        size="small"
                                                        @change="(val) => { changeTagValue(val, o.id) }">
                                                            <el-option v-for="item in tagsList" :value="item.id" :label="item.name"></el-option>
                                                        </el-select>
                                                        <el-button v-else class="button-new-tag ml-1" size="small" @click="showTagValue">新标签</el-button>
                                                    </el-dropdown-item>
                                                </el-dropdown-menu>
                                            </template>
                                        </el-dropdown>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>

                        <el-col
                            v-for="(o, index) in videoList"
                            :key="o"
                            :span="6"
                            :offset="index > 0 ? 1: 1"
                        >
                            <el-card :body-style="{ padding: '0px'}" align="middle" @dblclick="showDefault(o,2)">
                                <div style="display: flex; width: 200px; margin-top: 30px;margin-left: 30px;">
                                    <el-icon color="#409EFC"><Film /></el-icon>
                                    <span style="margin-left: 15px;">{{ o.name }}</span>
                                </div>

                                <div>
                                    <el-divider border-style="dotted" />
                                    <div class="bottom">
                                        <router-link :to="{name: 'personalFileEdit',query: {id: o.id,name:o.name}}">
                                            <el-button style="border: none;" :icon="Switch"></el-button>
                                        </router-link>
                                        <el-divider direction="vertical" />
                                        <el-button style="border: none;" :icon="Delete" @click="deleteFile(o)"></el-button>
                                        <el-divider direction="vertical" />
                                        <el-dropdown trigger="click" :hide-on-click="false">
                                            <el-button style="border: none;" :icon="More" />
                                            <template #dropdown>
                                                <el-dropdown-menu class="user-dropdown">
                                                    <el-dropdown-item>
                                                        <span @click="showDefault(o,2)">打开</span>
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <router-link :to="{name: 'personalFileEdit',query: { o: JSON.stringify(o), thisFile: JSON.stringify(thisFile)}}">
                                                            移动
                                                        </router-link>   
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <span @click="deleteFile(o)">删除</span>
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <span @click="share(o, thisFile)">共享</span>
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <span @click="downloadFile(o)">下载</span>
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <el-tag
                                                        class="mx-1"
                                                        closable
                                                        v-for="item in o.tags"
                                                        :disable-transitions="false"
                                                        @close="handleClose(item.id, o.id)">{{ item.name }}</el-tag>
                                                        <el-select
                                                        v-if="tagVisible"
                                                        v-model="tagValue"
                                                        size="small"
                                                        @change="(val) => { changeTagValue(val, o.id) }">
                                                            <el-option v-for="item in tagsList" :value="item.id" :label="item.name"></el-option>
                                                        </el-select>
                                                        <el-button v-else class="button-new-tag ml-1" size="small" @click="showTagValue">新标签</el-button>
                                                    </el-dropdown-item>
                                                </el-dropdown-menu>
                                            </template>
                                        </el-dropdown>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>

                        <el-col
                            v-for="(o, index) in soundList"
                            :key="o"
                            :span="6"
                            :offset="index > 0 ? 1: 1"
                        >
                            <el-card :body-style="{ padding: '0px'}" align="middle" @dblclick="showDefault(o,3)">
                                <div style="display: flex; width: 200px; margin-top: 30px;margin-left: 30px;">
                                    <el-icon color="#409EFC"><Microphone /></el-icon>
                                    <span style="margin-left: 15px;margin-top: -5px;">{{ o.name }}</span>
                                </div>

                                <div>
                                    <el-divider border-style="dotted" />
                                    <div class="bottom">
                                        <el-button style="border: none;" :icon="Download" @click="downloadFile(o)" />
                                        <el-divider direction="vertical" />

                                        <router-link :to="{name: 'personalFileEdit',query: {id: o.id,name:o.name}}">
                                            <el-button style="border: none;" :icon="Switch" />
                                        </router-link>                                <el-divider direction="vertical" />

                                        <!-- <el-button style="border: none;" :icon="Share" /> -->
                                        <el-button style="border: none;" :icon="Delete" @click="deleteFile(o)" />

                                        <el-divider direction="vertical" />
                                        <el-dropdown trigger="click" :hide-on-click="false">
                                            <el-button style="border: none;" :icon="More" />
                                            <template #dropdown>
                                                <el-dropdown-menu class="user-dropdown">
                                                    <el-dropdown-item>
                                                        <span @click="showDefault(o,3)">打开</span>
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <router-link :to="{name: 'personalFileEdit',query: { o: JSON.stringify(o), thisFile: JSON.stringify(thisFile)}}">
                                                            移动
                                                        </router-link>   
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <span @click="deleteFile(o)">删除</span>
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <span @click="share(o, thisFile)">共享</span>
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <span @click="downloadFile(o)">下载</span>
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <el-tag
                                                        class="mx-1"
                                                        closable
                                                        v-for="item in o.tags"
                                                        :disable-transitions="false"
                                                        @close="handleClose(item.id, o.id)">{{ item.name }}</el-tag>
                                                        <el-select
                                                        v-if="tagVisible"
                                                        v-model="tagValue"
                                                        size="small"
                                                        @change="(val) => { changeTagValue(val, o.id) }">
                                                            <el-option v-for="item in tagsList" :value="item.id" :label="item.name"></el-option>
                                                        </el-select>
                                                        <el-button v-else class="button-new-tag ml-1" size="small" @click="showTagValue">新标签</el-button>
                                                    </el-dropdown-item>
                                                </el-dropdown-menu>
                                            </template>
                                        </el-dropdown>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>

                        <el-col
                            v-for="(o, index) in otherList"
                            :key="o"
                            :span="6"
                            :offset="index > 0 ? 1: 1"
                        >
                            <el-card :body-style="{ padding: '0px'}" align="middle" @dblclick="showDefault(o,4)">
                                <div style="display: flex; width: 200px; margin-top: 30px;margin-left: 30px;">
                                    <el-icon color="#409EFC"><Files /></el-icon>
                                    <span style="margin-left: 15px;margin-top: -5px;">{{ o.name }}</span>
                                </div>

                                <div>
                                    <el-divider border-style="dotted" />
                                    <div class="bottom">
                                        <el-button style="border: none;" :icon="Download" @click="downloadFile(o)" />

                                        <el-divider direction="vertical" />

                                        <router-link :to="{name: 'personalFileEdit',query: {id: o.id,name:o.name}}">
                                            <el-button style="border: none;" :icon="Switch" />
                                        </router-link>                                <el-divider direction="vertical" />

                                        <!-- <el-button style="border: none;" :icon="Share" /> -->
                                        <el-button style="border: none;" :icon="Delete" @click="deleteFile(o)" />

                                        <el-divider direction="vertical" />
                                        <el-dropdown trigger="click" :hide-on-click="false">
                                            <el-button style="border: none;" :icon="More" />
                                            <template #dropdown>
                                                <el-dropdown-menu class="user-dropdown">
                                                    <el-dropdown-item>
                                                        <span @click="showDefault(o,4)">打开</span>
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <router-link :to="{name: 'personalFileEdit',query: { o: JSON.stringify(o), thisFile: JSON.stringify(thisFile)}}">
                                                            移动
                                                        </router-link>   
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <router-link :to="{name: 'personalFileEdit', query: { o: JSON.stringify(o), thisFile: JSON.stringify(thisFile)}}">
                                                            <span>编辑</span>
                                                        </router-link>
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <span @click="deleteFile(o)">删除</span>
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <span @click="share(o, thisFile)">共享</span>
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <span @click="downloadFile(o)">下载</span>
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <el-tag
                                                        class="mx-1"
                                                        closable
                                                        v-for="(item, index) in o.tags"
                                                        :disable-transitions="false"
                                                        @close="handleClose(item, index, o)">{{ item.name }}</el-tag>
                                                        <el-select
                                                        v-if="tagVisible"
                                                        v-model="tagValue"
                                                        size="small"
                                                        @change="(val) => { changeTagValue(val, o) }">
                                                            <el-option v-for="item in tagsList" :value="item.id" :label="item.name"></el-option>
                                                        </el-select>
                                                        <el-button v-else class="button-new-tag ml-1" size="small" @click="showTagValue">新标签</el-button>
                                                    </el-dropdown-item>
                                                </el-dropdown-menu>
                                            </template>
                                        </el-dropdown>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>                    
                </el-col>
            </el-row>
        </page-main>

        <el-dialog v-model="dialogVisible" title="预览" width="60%" draggable>
            <div v-if="thisShowFile.type==1">
                文稿编辑
                <Editor v-model="myValue" />
            </div>
            <video v-if="thisShowFile.type==2 && videoShow" ref="examplevideo" crossOrigin="anonymous" controls width="600" height="300">
                <source :src="thisShowFile.srcList" poster="picUrl" type="video/mp4">
                Sorry, your browser doesn't support embedded videos.
            </video>
            <audio v-if="thisShowFile.type==3" crossOrigin="anonymous" controls>
                <source :src="thisShowFile.srcList" type="audio/mpeg">
            </audio>
            <!-- <img v-if="thisShowFile.type==4" border="0" src="thisShowFile.srcList" alt="其他" width="160" height="100"> -->
            <el-image
                v-if="thisShowFile.type==4"
                :src="thisShowFile.srcList"
                fit="cover"
            />
            <v-md-preview v-if="thisShowFile.type == 5" :text="text" height="400px" width="100%"></v-md-preview>
            <!-- <img border="0" src="srcList" alt="视频" width="160" height="100"> -->
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button v-if="thisShowFile.type==1" type="primary" @click="submitWrite">
                        提交
                    </el-button>
                    <el-button v-if="thisShowFile.type !==1" type="primary" @click="dialogVisible = false">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<style>
.el-col-offset-1 {
    margin-top: 2%;
}
.bottom {
    margin-top: -13px;
    line-height: 12px;
    display: flex;

    /* justify-content: space-between; */
    align-items: center;
    justify-content: center;
}
.demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
}
.demo-tabs .custom-tabs-label .el-icon {
    vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
    vertical-align: middle;
    margin-left: 4px;
}
a {
    text-decoration: none;
}
.router-link-active {
    text-decoration: none;
}
.mid {
    margin-top: 25%;
    height: 50%;
}
.video {
    display: block;
    width: 100%;
}
.el-col-6 {
    max-width: 100%;
}
.card-d {
    margin-bottom: 10px;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    border: 2px solid rgb(14, 165, 233);
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    width: 100%;
}
.card-d div {
    line-height: 32px;
}
.sel {
    background: rgba(14, 165, 233, 0.2);
}
</style>
